<template>
  <span style="margin-left: 10px; margin-top: 5px">最近考试成绩</span>
  <div id="echarts" style="width: 100%; height: 70vh"></div>

  <!-- 添加对话框组件 -->
  <el-dialog v-model="dialogVisible" title="测试详情" width="30%">
    <div class="result-info">
      <p><strong>考试名称：</strong>{{ testInfo.title }}</p>
      <p><strong>考生姓名：</strong>{{ testInfo.username }}</p>
      <p><strong>得分：</strong>{{ testInfo.score }}</p>
      <p><strong>用时：</strong>{{ testInfo.usedTime }}</p>
      <p><strong>提交时间：</strong>{{ formatDate(testInfo.createTime) }}</p>
      <el-button
        icon="TrendCharts"
        type="primary"
        @click="handleViewPaper(testInfo)"
        >查看试卷</el-button
      >
    </div>
  </el-dialog>
</template>

<script setup>
import { onMounted } from "vue";
import * as echarts from "echarts";
import testResult from "@/api/questionItem/testResult";
import { useTestAnalysis } from "./useTestAnalysis";

const {
  dialogVisible,
  testInfo,
  formatDate,
  handleViewPaper,
  handleChartClick,
  generateChartOption,
} = useTestAnalysis();

onMounted(async () => {
  const myCharts = echarts.init(document.getElementById("echarts"));
  myCharts.clear(); // 清空 echarts 实例
  const res = await testResult.allAnalysis();
  const option = generateChartOption(
    res.data.xaxis,
    res.data.yaxis,
    res.data.ids
  );
  myCharts.setOption(option);
  myCharts.on("click", handleChartClick);
});
</script>

<style scoped>
.result-info {
  line-height: 2;
}
.result-info p {
  margin: 8px 0;
}
</style>
